<template>
    <div class="container">
        <div class="header">
            <img class="box" @click="toPage('pages/enterprise')" src="https://tuanfeng.whkxzj.com/profile/static/20230109160115-enterprise-banner.png" />
            <img class="box" @click="toPage('pages/masses')" src="https://tuanfeng.whkxzj.com/profile/static/20230109160233-masses-banner.png" />
        </div>
        <div class="content">
            <div class="tabs">
                <div class="tab" :class="{active: index === 0}" @click="index = 0">
                    <div class="text">帮代办公开</div>
                    <div class="line"></div>
                </div>
                <div class="tab" :class="{active: index === 1}" @click="index = 1">
                    <div class="text">项目</div>
                    <div class="line"></div>
                </div>
                <div class="tab" :class="{active: index === 2}" @click="index = 2">
                    <div class="text">群众</div>
                    <div class="line"></div>
                </div>
            </div>
            <div class="list">
                <div class="item" v-for="item in curList" @click="toPage('pages/agency_detail', { id: item.id, type: item.agentType})">
                    <div class="title">{{item.content}}</div>
                    <div class="footer">
                        <div class="type">{{item.agentTypeName}}类</div>
                        <div class="right">
                            <div class="time">申请时间：{{item.updateDate}}</div>
                            <div class="status" :style="{color: item.replyStatus === 1 ? '#67C23A' : '#E6A23C'}">{{item.replyStatusName}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Empty from "../components/Empty.vue";
import { getAgentAPI } from "../api/agency";
export default {
    components: { Empty },
    data() {
        return {
            index: 0,
            loading: false,
            list: [],
        };
    },
    computed: {
        curList() {
            if (this.index === 0) {
                return [...this.list];
            } else {
                let agentType = this.index - 1; // agentCode 0项目 1群众
                return this.list.filter((item) => item.agentType === agentType);
            }
        },
    },
    onShareAppMessage() {},
    onShow() {
        this.loading = true;
        wx.showLoading({
            title: "加载中...",
        });
        getAgentAPI().then((res) => {
            this.list = res.data;
            wx.hideLoading();
            this.loading = false;
        });
    },
    methods: {
        toPage(url, params) {
            this.$u.route({ url, params });
        },
    },
};
</script>
<style scoped lang="scss">
@import "../assets/scss/common.scss";

.container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    .header {
        width: 100vw;
        display: flex;
        justify-content: space-around;
        align-items: center;
        box-sizing: border-box;
        padding: 10px 5px;
        background-color: #fff;
        .box {
            width: 45vw;
            height: 27vw;
        }
    }
    .content {
        width: 100%;
        .tabs {
            width: 100%;
            box-sizing: border-box;
            padding: 15px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            .tab {
                width: 20%;
                flex: auto;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                .text {
                    margin-bottom: 5px;
                }
                .line {
                    width: 30px;
                    height: 2px;
                    background-color: #fff;
                    border-radius: 2px;
                }
                &.active {
                    .text {
                        font-weight: bold;
                        color: #df1400;
                    }
                    .line {
                        background-color: #df1400;
                    }
                }
            }
        }
        .list {
            padding: 0 15px;
            .item {
                padding: 15px;
                border-radius: 8px;
                background-color: #fff;
                margin-bottom: 15px;
                box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1) !important;
                .title {
                    font-weight: bold;
                    color: #0c92ff;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    overflow: hidden;
                    margin-bottom: 10px;
                }
                .footer {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    color: $color_secondary-text;
                    font-size: 14px;
                    .right {
                        display: flex;
                        .time {
                            margin-right: 15px;
                        }
                    }
                }
            }
        }
    }
}
</style>
